import $AppConfig from '../dev/app_config.js';
import loadingUI from '../dev/vue/plugin/loading';
import svgLineUi from '../dev/vue/svg-line-ui.vue';
import svgLatticeUi from '../dev/vue/svg-lattice-ui.vue';

import AlloyLever from 'alloylever';

AlloyLever.config({
    entry: "#experience"          //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
})


if (window.Vue) {
    Vue.use($AppConfig, {});
    Vue.use(loadingUI);
    Vue.component(svgLineUi.name, svgLineUi);
    Vue.component(svgLatticeUi.name, svgLatticeUi);
    var vm = new Vue({
        el: '#experience',
        data: {
            footNum: 0,
            animeTime: 4000
        },
        methods: {
            //判断是否是微信浏览器的函数
            isWeiXin() {
                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    return true;
                } else {
                    return false;
                }
            },
            carMove() {

                let moveY = '-3.7rem';
                let docHeight = document.body.clientHeight || document.documentElement.clientHeight;
                if (docHeight >= 800) {
                    moveY = '-4.2rem';
                }
                anime({
                    targets: '#carMove',
                    translateY: ['4rem', moveY],
                    easing: 'linear',
                    duration: this.animeTime,
                })
                anime({
                    targets: '#carMove .exper-warp-box-car',
                    translateY: ['4rem', 0],
                    scale: [5, 1],
                    easing: 'linear',
                    duration: this.animeTime,
                })
                anime({
                    targets: '#carMove .exper-warp-box-lamp',
                    scale: [5, 1],
                    easing: 'linear',
                    duration: this.animeTime,
                })

                var basicTimeline = anime.timeline();
                basicTimeline
                    .add({
                        targets: '.exper-warp-content_btn',
                        opacity: [0, 1],
                        easing: 'linear',
                        duration: 750,
                        delay: 2000
                    })
                    .add({
                        targets: '.exper-warp-content_btn',
                        scale: [1, 1.5],
                        easing: 'linear',
                        duration: 250
                    })
                    .add({
                        targets: '.exper-warp-content_btn',
                        scale: [1.5, 1],
                        easing: 'linear',
                        duration: 250,
                    })
                    .add({
                        targets: '#carMove .exper-warp-box-title',
                        scale: [5, 0],
                        opacity: [0, 1],
                        rotateX: [180, 180],
                        easing: 'linear',
                        duration: 1000
                    })
                    .add({
                        targets: '#carMove .exper-warp-box-title',
                        scale: [0, 1],
                        rotateX: [180, 0],
                        easing: 'linear',
                        duration: 200
                    })


                // anime({
                //     targets: '.exper-warp-content_btn',
                //     opacity: {
                //         value: [0, 1],
                //         duration: 1000,
                //         delay: 2000
                //     },
                //     scale: {
                //         value: [1, 1.5],
                //         duration: 250,
                //         delay: 3000
                //     },
                //     easing: 'linear',
                // })
                anime({
                    targets: '#carLine',
                    translateY: ['8rem', '0'],
                    easing: 'linear',
                    duration: this.animeTime,
                    delay: 500
                })
                anime({
                    targets: '#oil',
                    strokeDashoffset: [anime.random(0, -50), anime.random(-90, -180)],
                    easing: 'linear',
                    direction: 'alternate',
                    loop: true,
                    duration: this.animeTime,
                    update: anim => {
                        this.footNum = Math.round(anim.progress);
                    },
                })
                anime({
                    targets: '#pointer',
                    rotate: () => {
                        return [anime.random(-120, -20), anime.random(20, 120)];
                    },
                    easing: 'linear',
                    duration: this.animeTime,
                    direction: 'alternate',
                    loop: true,
                })


            },
            appDown(){
                if (Vue.$AppConfig.isIos) {
                    window.location.href = "https://itunes.apple.com/cn/app/%E9%95%BF%E5%AE%89%E5%87%BA%E8%A1%8C/id1136083257?mt=8";
                } else {
                    window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.ccclubs.changan";
                }
            }
        },
        mounted() {

            setTimeout(() => {
                try {
                    document.body.removeChild(document.getElementById('loading'));
                    this.carMove();
                } catch (e) {
                }
            }, 800)


        }
    })
}